<template>
  <ElCard class="card art-custom-card summary-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="title">CPU</span>
        <span class="subtitle">使用概览</span>
      </div>
    </template>

    <ElDescriptions :column="4" border>
      <ElDescriptionsItem label="核心数">{{ data?.cpu_num ?? '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="使用率"><span class="accent">{{ formatPercent(data?.used) }}</span></ElDescriptionsItem>
      <!-- <ElDescriptionsItem label="系统使用率">{{ formatPercent(data?.sys) }}</ElDescriptionsItem> -->
      <ElDescriptionsItem label="空闲率">{{ formatPercent(data?.free) }}</ElDescriptionsItem>
    </ElDescriptions>
    <div class="progress-place"></div>
  </ElCard>
</template>

<script setup lang="ts">
import type { ServerMonitorModel } from '@/api/system/server'

const props = defineProps<{ data: ServerMonitorModel['cpu'] | null | undefined }>()

const clampPercent = (val?: number | string | null) => {
  if (val === undefined || val === null) return 0
  const n = Number(val)
  return n > 100 ? 100 : n < 0 ? 0 : Number(n.toFixed(1))
}

const formatPercent = (val?: number | string | null) => `${clampPercent(val)}%`
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.card-header .title {
  font-weight: 600;
}

.card-header .subtitle {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

.accent {
  color: var(--el-color-success);
  font-weight: 600;
}

.summary-card {
  min-height: 180px;
}

.progress-place {
  height: 14px;
  margin-top: 12px;
}
</style>
